<template>
	<view>
		<u-navbar :borderBottom=false title-color="#FFFFFF" back-icon-color="#FFFFFF" title="订单详情"
			:background="background" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="path" style="background: #FFFFFF;margin-top: 20rpx;padding: 20rpx 0;border-radius: 18rpx;" v-if="detail.status!=-1">
			<u-steps mode="number" icon="checkbox-mark" active-color="#00C785" :list="numList" :current="detail.status-1">
			</u-steps>
		</view>
		<view class="steps" style="padding: 10rpx 20rpx; text-align: center; background-color: #fff;">
			商品问题
		</view>
		<view class="flex-col send-info">
			<view class="flex-row group_11">
				<view class="left-section"> </view>
				<text class="text_15">邮寄信息</text>
			</view>
			<view class="flex-row section_8">
				<image src="/static/point.png" class="image_7" />
				<text class="text_16">请把您的商品按照如下地址邮寄完成后,填入快递信息</text>
			</view>
			<view class="flex-col section_9">
				<view class="flex-row">
					<text class="text_17">收件人</text>
					<text class="text_18">{{config.receive_name}}</text>
				</view>
				<view class="flex-row group_13">
					<text class="text_19">联系电话</text>
					<text class="text_20">{{config.receive_phone}}</text>
				</view>
				<view class="flex-row group_14">
					<text class="text_21">收货地址</text>
					<text class="text_22">{{config.receive_add}}</text>
				</view>
			</view>
			<view v-if="!detail.delivery" @click="toPost()" class="flex-col items-center button">
				<text>已发货，填写单号</text>
			</view>
		</view>
		<view class="flex-col order-info">
			<view class="flex-row group_15">
				<view class="left-section"> </view>
				<text class="text_24">订单信息</text>
			</view>
			<view class="group_16 justify-between view_2">
				<text class="text_25">下单时间</text>
				<text class="text_27">{{detail.updated_at}}</text>
			</view>
			<view class="group_16 justify-between">
				<text class="text_25">订单编号</text>
				<text class="text_27">{{detail.order_sn}}</text>
			</view>
			<!-- <view class="group_16 justify-between">
				<text class="text_25">收款方式</text>
				<text class="text_27">{{detail.get_type == 1 ? '微信转账' : '银行卡'}}</text>
			</view> -->
			<view v-if="detail.delivery" class="group_16 justify-between">
				<text class="text_25">物流公司</text>
				<text class="text_27">{{detail.delivery.delivery_name}}</text>
			</view>
			<view v-if="detail.delivery" class="group_16 justify-between">
				<text class="text_25">物流单号</text>
				<text class="text_27">{{detail.delivery.order_sn}}</text>
			</view>
		</view>
		<view class="goods">
			<view class="top">
				<view class="left">
					<image :src="detail.goods.format_image" mode="widthFix" style="width: 150rpx;"></image>
				</view>
				<view class="right">
					<view class="name">
						{{detail.goods.name}}
					</view>
					<view class="type">
						商品类型:{{detail.goods.brand}}
					</view>
					<view class="price">
						￥{{detail.goods.price}}
					</view>
				</view>
			</view>
			<view class="bottom" v-if="detail.recived_at">
				<view class="cell">
					<view class="left">
						评估时间：
					</view> 
					<view class="right">
						{{detail.recived_at}}
					</view>
				</view>
				<view class="cell">
					<view class="left">
						评估单价：
					</view> 
					<view class="right price">
						￥{{detail.appraisement_price}}
					</view>
					
				</view>
				<view class="cell">
					<view class="left">
						评估总价：
					</view> 
					<view class="right price">
						￥{{detail.appraisement_count_price}}
					</view>
					
				</view>
				<view class="cell">
					<view class="left">
						卖出数量：
					</view> 
					<view class="right price">
						{{detail.finish_num||0}}瓶
					</view>
					
				</view>
				<view class="cell">
					<view class="left">
						未买数量：
					</view> 
					<view class="right price">
						{{detail.goods_number-(detail.finish_num||0)}}瓶
					</view>
					
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		getSystem
	} from '@/api/index.js'
	import {
		tiao
	} from '../../utils/common';

	export default {
		data() {
			return {
				config: {},
				detail: {},
				_id: '',
				show: false,
				background: {
					backgroundColor: '#00C785',
				},
				numList: [{
					name: '下单/未发货'
				}, {
					name: '已发/未收货'
				}, {
					name: '已收/验酒'
				}, {
					name: '寄卖中'
				}, {
					name: '寄卖完成'
				}],
			}
		},
		onLoad(res) {
			console.log(res);
			getOrderDetail(res.id, {}).then(res => {
				console.log(res);
				this.detail = res.data
			})
			let obj = {
				key: "receive"
			}
			getSystem(obj).then(res => {
				console.log(res);
				this.config = JSON.parse(res.data.value)
			})
		},
		methods: {
			// toLogi(no, company, mobile) {
			// 	vk.navigateTo('/pages/logistics/logistics?no=' + no + "&company=" + company + "&mobile=" + mobile)
			// },
			toPost() {
				tiao('/pages/fill-logistics/fill-logistics', {
					id: this.detail.id
				})
			},
			getAddressDetail() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	// 自动换行
	.g-text {
		width: 100%;
		word-wrap: break-word;
		word-break: break-all;
		white-space: pre-line;
		color: rgb(102, 102, 102);
		font-size: 24rpx;
		line-height: 33rpx;
		text-align: left;
		padding: 30rpx 30rpx 0 30rpx;

	}

	// 机器详情开始
	.machine {
		padding: 20rpx 30rpx 18rpx;
		background-image: url('https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/619e047504575d00116aafc7/61db8469a92fb70011746cc8/16417779285213203098.png');
		background-position: 0px 0px;
		background-size: 690rpx 258rpx;
		background-repeat: no-repeat;

		.group_5 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.image_5 {
				border-radius: 3rpx;
				width: 50rpx;
				height: 50rpx;
			}

			.text_3 {
				margin: 5rpx 0 5rpx 20rpx;
			}
		}

		.text_4 {
			margin-top: 20rpx;
			color: rgb(153, 153, 153);
			font-size: 22rpx;
			line-height: 30rpx;
			white-space: nowrap;
		}

		.group_6 {
			margin-top: 8rpx;

			.text-wrapper {
				padding: 9rpx 0;
				align-self: center;
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				font-weight: 500;
				line-height: 33rpx;
				white-space: nowrap;
				background-color: rgb(0, 199, 133);
				box-shadow: 0px 2rpx 20rpx 0px rgba(0, 151, 101, 0.2);
				border-radius: 25rpx;
				width: 160rpx;
				height: 50rpx;
			}

			.text_5 {
				margin-top: 38rpx;
				color: rgb(0, 199, 133);
				font-size: 44rpx;
				font-weight: 500;
				line-height: 62rpx;
				white-space: nowrap;
			}

			.group_8 {
				white-space: nowrap;
				height: 112rpx;

				.text_6 {
					color: rgb(0, 199, 133);
					font-size: 80rpx;
					font-weight: 600;
					line-height: 112rpx;
				}

				.text_7 {
					color: rgb(0, 199, 133);
					font-size: 40rpx;
					font-weight: 600;
					line-height: 56rpx;
				}
			}
		}
	}

	// 机器详情结束
	// 邮寄信息开始
	.send-info {
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;

		.group_11 {
			padding: 30rpx 0 4rpx;
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				margin: 10rpx 0;
				background-color: rgb(0, 199, 133);
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 20rpx;
			}

			.text_15 {
				margin-left: 24rpx;
			}
		}

		.section_8 {
			margin-left: 30rpx;
			margin-right: 32rpx;
			padding: 11rpx 20rpx;
			color: rgb(194, 155, 123);
			font-size: 20rpx;
			line-height: 28rpx;
			white-space: nowrap;
			background-color: rgb(255, 249, 235);
			border-radius: 6rpx;

			.image_7 {
				margin: 4rpx 0;
				width: 20rpx;
				height: 20rpx;
			}

			.text_16 {
				margin-left: 10rpx;
				margin-right: 38rpx;
			}
		}

		.section_9 {
			margin: 10rpx 30rpx 0;
			padding: 30rpx 30rpx;
			background-color: rgb(247, 248, 250);
			border-radius: 10rpx;

			.group_13 {
				margin-top: 20rpx;

				.text_19 {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_20 {
					margin-left: 30rpx;
					color: rgb(34, 34, 34);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}
			}

			.group_14 {
				margin-top: 20rpx;

				.text_21 {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_22 {
					margin-left: 30rpx;
					margin-right: 19rpx;
					color: rgb(34, 34, 34);
					font-size: 28rpx;
					line-height: 40rpx;
					// white-space: nowrap;
				}
			}

			.text_17 {
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;
			}

			.text_18 {
				margin-left: 58rpx;
				color: rgb(34, 34, 34);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;
			}
		}

		.button {
			margin-right: 30rpx;
			margin-top: 20rpx;
			padding: 15rpx 0 16rpx;
			align-self: flex-end;
			color: rgb(255, 255, 255);
			font-size: 24rpx;
			font-weight: 500;
			line-height: 33rpx;
			white-space: nowrap;
			background-color: rgb(0, 199, 133);
			box-shadow: 0px 2rpx 20rpx 0px rgba(0, 151, 101, 0.2);
			border-radius: 31rpx;
			width: 260rpx;
		}
	}

	// 邮寄信息结束
	// 订单信息开始
	.order-info {
		margin-top: 20rpx;
		padding: 30rpx 0 31rpx;
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;

		.group_15 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				margin: 10rpx 0;
				background-color: rgb(0, 199, 133);
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 20rpx;
			}

			.text_24 {
				margin-left: 24rpx;
			}
		}

		.group_16 {
			margin-top: 31rpx;
			padding: 0 30rpx;

			.text_25 {
				color: rgb(102, 102, 102);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
			}

			.text_27 {
				color: rgb(34, 34, 34);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
			}
		}

		.view_2 {
			margin-top: 30rpx;
		}
	}

	// 订单信息结束

	// 弹窗开始
	.divider {
		margin: 10rpx 30rpx;
		background-color: rgb(238, 238, 238);
		height: 2rpx;
	}

	.item {
		padding-bottom: 21rpx;

		.group_13 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				margin: 9rpx 0;
				background-color: rgb(0, 199, 133);
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 22rpx;
			}

			.text_17 {
				margin-left: 24rpx;
			}
		}

		.text_18 {
			margin-left: 30rpx;
			margin-top: 10rpx;
			color: rgb(102, 102, 102);
			font-size: 24rpx;
			line-height: 33rpx;
			white-space: nowrap;
		}
	}

	// 弹窗结束
	.goods{
		width: 710rpx;
		min-height: 200rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	
	.goods .top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.left{
			width: 150rpx;
			height: 150rpx;
			border-radius: 20rpx;
			overflow: hidden;
			
		}
		.right{
			width: 450rpx;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.name{
				font-size: 32rpx;
				color: #333;
			}
			.type{
				font-size: 26rpx;
				color: #666;
			}
			.price{
				color: #fe5931;
				font-size: 32rpx;
			}
		}
	}
	.goods .bottom{
		margin-top: 20rpx;
		.cell{
			display: flex;
			.left{
				width: 200rpx;
			}
			.right .price{
				color: #fe5931;
			}
		}
	}
</style>